<template>
  <div class="addFreight">
    <h2 class="editPage">{{ id ? "修改" : "新增" }}</h2>
    <a-card>
      <a-form :form="form">
        <a-form-item
          label="模板名称"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 19 }"
        >
          <a-input
            placeholder="请输入模板名称"
            @change="templateNameChange"
            v-decorator="[
              'templateName',
              {
                rules: [{ required: true, message: '请输入模板名称' }],
              },
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="运费说明"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 19 }"
        >
          <a-input
            placeholder="请输入运费说明"
            @change="descriptionChange"
            v-decorator="[
              'description',
              {
                rules: [{ required: true, message: '请输入运费说明' }],
              },
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="计费方式"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 19 }"
        >
          <a-radio-group v-model="postUserData.freightType" buttonStyle="solid">
            <a-radio
              v-for="(item, index) in feeList"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-radio
            >
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="配送区域及运费"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 19 }"
        >
          <a-table
            width="400px"
            :columns="columns"
            :dataSource="postUserData.specifyDeliveryDetail"
            :rowKey="(record) => record.num"
            :loading="loading"
            :pagination="false"
            bordered
          >
            <template slot="name" slot-scope="text, record">
              {{ getName(record.specificationValues) }}
            </template>
            <template slot="value" slot-scope="text, record">
              {{ getValue(record.specificationValues) }}
            </template>
            <template slot="action" slot-scope="text, record">
              <a-tag color="#f50" @click="freightTypeDelete(record)">删除</a-tag>
            </template>
          </a-table>
          <a-button
            class="search_btn"
            icon="plus"
            @click="addFreightTypeDetail"
          >
            添加配送区域
          </a-button>
        </a-form-item>
        <a-form-item
          label="指定包邮"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 19 }"
        >
          <a-radio-group
            v-model="postUserData.specifyMailedStatus"
            buttonStyle="solid"
          >
            <a-radio
              v-for="(item, index) in specifyMailedStatusList"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-radio
            >
          </a-radio-group>
          <!-- table -->
          <a-table
            v-if="postUserData.specifyMailedStatus === 'OPEN'"
            width="400px"
            :columns="columns_"
            :dataSource="postUserData.specifyMailedDetail"
            :rowKey="(record) => record.id"
            :loading="loading"
            :pagination="false"
            bordered
          >
            <template slot="name" slot-scope="text, record">
              {{ getName(record.specificationValues) }}
            </template>
            <template slot="value" slot-scope="text, record">
              {{ getValue(record.specificationValues) }}
            </template>
            <template slot="action" slot-scope="text, record">
              <a-tag color="#f50" @click="specifyMailedDelete(record)">删除</a-tag>
            </template>
          </a-table>
          <a-button
            v-if="postUserData.specifyMailedStatus === 'OPEN'"
            @click="addSpecifyMailedDetail"
            class="search_btn"
            icon="plus"
          >
            添加指定包邮区域
          </a-button>
          <!-- table -->
        </a-form-item>
        <a-form-item
          label="指定区域不配送"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 19 }"
        >
          <a-radio-group
            v-model="postUserData.specifyDeliveryStatus"
            buttonStyle="solid"
          >
            <a-radio
              v-for="(item, index) in specifyMailedStatusList"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-radio
            >
          </a-radio-group>
          <a-cascader
            :options="options"
            placeholder="请选择商户地址"
            @change="onChange"
            v-decorator="[
              'Address',
              {
                rules: [{ required: true, message: '请输入地址详情' }],
              },
            ]"
          />
        </a-form-item>
        <div>
          <a-button type="primary" class="marginBtn" @click="AddFreightAction"
            >确定</a-button
          >
          <a-button @click="$router.go(-1)" class="marginBtn">返回</a-button>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import * as API from "../../api/freight";
import options from "../../utils/cascader";
import { mapState } from "vuex";

export default {
  name: "Freight",
  data() {
    return {
      options,
      loading: false,
      form: this.$form.createForm(this),
      id: null,
      loading: false,
      postUserData: {
        freightType: "NUMBER",
        specifyMailedStatus: "CLOSE", //指定包邮状态
        specifyDeliveryStatus: "CLOSE", //指定包邮状态
        specifyDeliveryDetail: [], // 配送区域及运费
        specifyMailedDetail: [], // 指定包邮
      },
      feeList: [
        { value: "NUMBER", label: "按件数" },
        { value: "WEIGHT", label: "按重量" },
        { value: "VOLUME", label: "按体积" },
      ],
      specifyMailedStatusList: [
        { value: "CLOSE", label: "关闭" },
        { value: "OPEN", label: "开启" },
      ],
      columns: [
        {
          title: "可配送区域",
          dataIndex: "templateName",
          align: "center",
          scopedSlots: { customRender: "templateName" },
        },
        {
          title: "首件",
          dataIndex: "firstOne",
          align: "center",
          scopedSlots: { customRender: "firstOne" },
        },
        {
          title: "运费(元)",
          dataIndex: "freightMoney",
          align: "center",
          scopedSlots: { customRender: "freightMoney" },
        },
        {
          title: "续件",
          dataIndex: "renewalNum",
          align: "center",
          scopedSlots: { customRender: "renewalNum" },
        },
        {
          title: "续费(元)",
          dataIndex: "renewalMoney",
          align: "center",
          scopedSlots: { customRender: "renewalMoney" },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      columns_: [
        {
          title: "选择地区",
          dataIndex: "templateName",
          align: "center",
          scopedSlots: { customRender: "templateName" },
        },
        {
          title: "最低购买件数",
          dataIndex: "firstOne",
          align: "center",
          scopedSlots: { customRender: "firstOne" },
        },
        {
          title: "最低购买金额(元)",
          dataIndex: "freightMoney",
          align: "center",
          scopedSlots: { customRender: "freightMoney" },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
    };
  },
  mounted() {
    this.getbrandInfo();
  },
  created() {
    this.id = this.$route.query.id || null;
  },

  activated() {},
  methods: {
    setFields(submitData) {
      // submitData.specificationValues.forEach((item) => {
      //   item.value_ = item.value.split(",");
      // });
      // this.specificationValues = submitData.specificationValues;
      this.form.setFieldsValue({
        templateName: submitData.templateName,
        description: submitData.description,
        // keywords: submitData.keywords,
        // logoPath: submitData.logoPath,
        // introduction: submitData.introduction,
      });
    },
    //详情
    getbrandInfo() {
      if (this.id) {
        API.getFreightDetail(this.id).then((res) => {
          this.postUserData = res.data;
          this.setFields(res.data);
        });
      }
    },

    // onChange(e) {
    //   this.postUserData.introduction = e.target.value;
    // },
    // roleChange(value) {
    //   this.postUserData.FreightType = value;
    //   // console.log(value, 5555);
    // },

    // editorActon(editorContent) {
    //   this.postUserData.remark = editorContent;
    // },

    AddFreightAction() {
      this.form.validateFields((err) => {
        if (!err) {
          this.specificationValues.forEach((item) => {
            console.log(item.value_, "3333333333333");
            item.value = item.value_ ? item.value_.join(",") : "";
          });
          this.postUserData.specificationValues = this.specificationValues;
          this.id ? this.edit() : this.add();
          //  this.add();
        }
      });
    },
    //新增
    add() {
      console.log(this.postUserData);
      this.loading = true;
      API.addFreight(this.postUserData)
        .then((res) => {
          if (res.code === 200) {
            // this.$message.destroy();
            this.$message.success("添加成功");
            this.$router.go(-1);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //修改
    edit() {
      this.loading = true;
      API.editFreight(this.id, this.postUserData)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("修改成功");
            this.$router.go(-1);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    filterOption(input, option) {
      console.log(input, option);
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    addFreightTypeDetail() {
      let num = new Date().getTime()
      let obj = {
        num: num,
        areaCode: "string",
        areaName: "string",
        cityCode: "string",
        cityName: "string",
        firstOne: 0,
        freightMoney: 0,
        // freightType: "NUMBER",
        provinceCode: "string",
        provinceName: "string",
        renewalMoney: 0,
        renewalNum: 0,
      };
      this.postUserData.specifyDeliveryDetail.push(obj);
    },
    addSpecifyMailedDetail() {
      let num = new Date().getTime()
      let obj = {
        num: num,
        areaCode: "string",
      areaName: "string",
      cityCode: "string",
      cityName: "string",
      minBuyMoney: 0,
      minBuyNum: 0,
      provinceCode: "string",
      provinceName: "string"
      };
      this.postUserData.specifyMailedDetail.push(obj);
    },
    specifyMailedDelete(item){
      console.log(item)
    },
    freightTypeDelete(item){
      console.log(item)
    },
    //表单参数
    templateNameChange(e) {
      // console.log(e.target.value);
      this.postUserData.freightName = e.target.value;
    },
    descriptionChange(e) {
      this.postUserData.description = e.target.value;
    },
    onChange(value, selectedOptions) {
      this.postUserData.provinceCode = value[0];
      this.postUserData.cityCode = value[1];
      this.postUserData.areaCode = value[2];

      this.postUserData.provinceName = selectedOptions[0].label;
      this.postUserData.cityName = selectedOptions[1].label;
      this.postUserData.areaName = selectedOptions[2].label;

      console.log(this.address);
      console.log(
        value,
        selectedOptions[0].label,
        selectedOptions[1].label,
        selectedOptions[2].label
      );
    },
  },
};
</script>
